<script setup lang="ts">
import {Page} from '@vben/common-ui';

import {
  ElButton,
  ElCol,
  ElForm,
  ElFormItem,
  ElInput,
  ElRow,
  ElTable,
  ElTableColumn,
} from 'element-plus';
import {DeptApi} from "#/api/auth/dept-api";
import {onMounted, ref} from "vue";
import type {DeptModel} from "#/model/dept-model";


const form = ref<DeptModel>({});
const tableData = ref([]);

function getList() {
  DeptApi.getDeptListApi(form.value).then(res => {
    tableData.value = res;
  });
}

onMounted(() => {
  getList();
});

</script>

<template>
  <Page description="" title="部门管理">
    <template #extra>
      <ElButton size="small" type="primary">添加部门</ElButton>
      <ElButton size="small" type="primary" @click="getList">刷新</ElButton>
    </template>

    <ElForm label-suffix=":">
      <ElRow :gutter="20">
        <ElCol :span="12">
          <ElFormItem label="部门名称">
            <ElInput placeholder="请输入部门名称" v-model="form.deptName"/>
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="" style="height: 32px">
            <ElButton size="small" type="primary" @click="getList">查询</ElButton>
          </ElFormItem>
        </ElCol>
      </ElRow>
    </ElForm>
    <ElTable
      :data="tableData"
      border
      default-expand-all
      row-key="deptId"
      style="width: 100%; margin-bottom: 20px"
    >
      <ElTableColumn label="部门名称" prop="deptName"/>
      <ElTableColumn label="排序" prop="orderNum"/>
      <ElTableColumn label="创建时间" prop="createTime"/>
      <ElTableColumn label="操作" width="150">
        <template #default="scope">
          <ElButton size="small" type="primary">编辑</ElButton>
          <ElButton size="small" type="danger">删除</ElButton>
        </template>
      </ElTableColumn>
    </ElTable>
  </Page>
</template>

<style scoped></style>
